import {Component,Fragment} from 'react'
import {  Menu } from 'antd';
import { UserOutlined} from '@ant-design/icons';
import {Link , withRouter} from 'react-router-dom'
import {connect} from 'react-redux'
import actions from 'store/action/user'



const { SubMenu } = Menu;
class AsideMenu extends Component {
  constructor(props) {
    super(props);
    this.state = { 
      openKeys:[], //打开的--里面为路由路径
      selectedKeys:[], //选中得-里面为路由路径
      Routers:[]
     }
  }

  // 角色-权限 ：在这里多了一层接口请求 然后把路由过滤一遍

  // 无子级菜单
    renderMenu=({key,title})=>{
      return <Menu.Item key={key} icon={<UserOutlined />}><Link to={key}>{title}</Link></Menu.Item>
    }
  // 有子级菜单
    renderSubMenu=({key,title,child})=>(
       <SubMenu key={key} icon={<UserOutlined />} title={title}>
            {child&&child.length>0&&child.map(item=>item.child ? this.renderSubMenu(item) : this.renderMenu(item))}
        </SubMenu>
  )
      // 功能：就是侧边栏选中状态以及刷新状态不丢失 
      getItem=({ key, keyPath })=>{ //无子级菜单选中
          this.setKey(keyPath,[key])
      }
      getSubItem=(arrayKeys)=>{
         this.setKey(arrayKeys ,this.state.selectedKeys)
      }
      setKey(openKeys=[],selectedKeys){
        // 参数一：打开的数组 后面为选择的高亮的数组
        this.setState({
          openKeys,
          selectedKeys
        })
      }
      // 生命周期 
      componentDidMount(){
          const pathname = this.props.location.pathname;
          const arr =  pathname.split("/")
          const menuKey = arr.slice(0, arr.length-1).join('/');
          this.setKey([menuKey],[pathname])
      }
      // 组件挂载前 - 过滤路由
      async UNSAFE_componentWillMount(){
        // 方式三 
       await this.props.getUserRoles()
       this.setState({Routers:this.props.user.userRoute}) //为了解决异步问题

        // 方式二
        // this.props.handleRoute() //可以放在登录完成后马上调取 

      //方式一 
        // 这里抽取到redux里面去了
        // 从本地取出（存在本地的）当前用户的角色权限有哪些 
        // let userRole =  JSON.parse(sessionStorage.getItem('role'))
        // userRole =userRole && userRole.split(",");
        //   // 存储路由 
        // let routers =[] 
        // // 如果userRole包含admin--超级管理员 就全部展示 
        // if(userRole.includes('admin')){
        //   routers=router
        // }else{
        //   // 其它的 过滤
        //   routers =  router.filter(item=>{
        //       if(this.hasPermission(item,userRole)){
        //       // 如果有子级的话
        //       if(item.child && item.child.length>0){
        //        item.child = item.child.filter(child=>{
        //           if(this.hasPermission(child,userRole)){
        //             return child
        //           }
        //         })
        //       }
        //         return item
        //      }
        //     })
        // }
      //  this.setState({Routers:this.props.user.userRoute})
      }

      // 过滤函数 -- 便于子级递归过滤 
      hasPermission=(item,router)=>{
        if(item.role && item.role.length>0){
          return router.some(elem=>item.role.indexOf(elem)>=0);
        }
      }

  render() { 
    const {openKeys,selectedKeys,Routers} = this.state 
    return (  
    <Fragment>
        <Menu
          mode="inline"
          openKeys={openKeys}
          selectedKeys={selectedKeys}
          style={{ height: '100%', borderRight: 0 }}
          theme='dark'
          onOpenChange={this.getSubItem}
          onClick={this.getItem}
        >
          {/* {router&&router.length>0&&router.map(item=>item.child ? this.renderSubMenu(item) : this.renderMenu(item))} */}
          {Routers&&Routers.length>0&&Routers.map(item=>item.child ? this.renderSubMenu(item) : this.renderMenu(item))}

        </Menu>
    </Fragment> 
     );
  }
}
 
export default connect(state=>({...state}),actions)(withRouter(AsideMenu));